<style>
    .my-viewport {
        height: 200px;
        border: solid 1px;
    }
</style>
<script>

</script>
<section id="scroll">
    <div class="page-header">
        <h1>Scroll till you drop</h1>
    </div>
    <div class="row">
        <div class="span6">
            <h3>What?</h3>

            <p>Provide access to scrollable lists of unlimited length.</p>
            <p>
                Items can be of any complexity and can vary in any possible way. They are dynamically instantiated as they become visible and $destroyed as they are scrolled out of view.
            </p>

            <div class="my-viewport" ui-scroll-viewport>
                <div ui-scroll="item in datasource">{{$index + ' ' + item}}</div>
            </div>
        </div>
        <div class="span6">
            <h3>Why?</h3>

            <p> The common way to present to the user a list of data elements of undefined length is to start with a small portion at the top of the
                list - just enough to fill the space on the page. Additional rows are appended to the bottom of the list as the user scrolls down the list.
            </p>

            <p> Unfortunately, even though rows at the top of the list become invisible as they scroll out of the view,
                they are still a part of the page and still consume resources. As the user scrolls down the list grows and the web app slows down.
            </p>
            
            <p><a href="https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md">read more...</a>
            </p>
        </div>
    </div>

    <h3>How?</h3>


<p>If all you want to use the entire window as the viewport, all you need is this:</p>
<pre class="prettyprint">
&lt;div ui-scroll=&quot;item in datasource&quot;&gt;{{item}}&lt;/div&gt;
</pre>

<p>If you want to control the viewport yourself you can do it like this:</p>
<pre class="prettyprint">
&lt;div ui-scroll-viewport style=&quot;height:200px;&quot; &gt;
   &lt;div ui-scroll="item in datasource"&gt;{{item}}&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Make sure that you always constrain the height of your viewport</p>

</section>
